import Icon from '@/assets/icons'
import Button from '@/components/Button'
import Header from '@/components/Header'
import Input from '@/components/Input'
import ScreenWrapper from '@/components/ScreenWrapper'
import { theme } from '@/constants/theme'
import { useAuth } from '@/contexts/AuthContext'
import { hp, wp } from '@/helpers/common'
import { getUserImageUrl } from '@/services/imageServie'
import { updateUser } from '@/services/userService'
import { Image } from 'expo-image'
import { useRouter } from 'expo-router'
import React, { useEffect, useState } from 'react'
import { Alert, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native'

const EditProfile = () => {
  const { user: currrentUser, setUserData } = useAuth()
  const [loading, setLoading] = useState(false)
  const router = useRouter()

  const [user, setUser] = useState({
    name: '',
    phoneNumber: '',
    image: null,
    bio: '',
    address: '',
  })

  useEffect(() => {
    if (currrentUser) {
      setUser({
        name: currrentUser.name || '',
        phoneNumber: currrentUser.phoneNumber || '',
        image: currrentUser.image || '',
        bio: currrentUser.address || '',
        address: currrentUser.bio || '',
      })
    }
  }, [currrentUser])

  const onSubmit = async () => {
    let userData = { ...user }

    let { name, phoneNumber, bio, address } = userData

    if (!name || !phoneNumber || !bio || !address) {
      Alert.alert('提示', '请填写所有字段')
      return
    }
    setLoading(true)

    const res = await updateUser(currrentUser?.id, userData)
    setLoading(false)
    console.log(res)
    if (res.success) {
      setUserData({ ...currrentUser, ...userData })
      router.back()
    }
  }

  let imageSource = user.image && typeof user.image == 'object' ? user.image.uri : getUserImageUrl()

  return (
    <ScreenWrapper>
      <View style={styles.container}>
        <ScrollView>
          <Header title="Edit Profile" />
          {/* form */}
          <View style={styles.form}>
            <View style={styles.avatarContainer}>
              <Image source={imageSource} style={styles.avatar} />
              <Pressable style={styles.cameraIcon}>
                <Icon name="camera" size={20} strokeWidth={2.5} />
              </Pressable>
            </View>
            <Text style={{ fontSize: hp(1.5), color: theme.colors.text }}>
              请填写您的个人资料详情
            </Text>
            <Input
              icon={<Icon name="call" />}
              placeholder="请输入手机号"
              value={user.phoneNumber}
              onChangeText={(value) => setUser({ ...user, phoneNumber: value })}
            />
            <Input
              icon={<Icon name="location" />}
              placeholder="请输入地点"
              value={user.address}
              onChangeText={(value) => setUser({ ...user, address: value })}
            />
            <Input
              placeholder="请输入简介"
              value={user.bio}
              multiline={true}
              containerStyle={styles.bio}
              onChangeText={(value) => setUser({ ...user, bio: value })}
            />
            <Button title="更新" loading={loading} onPress={onSubmit} />
          </View>
        </ScrollView>
      </View>
    </ScreenWrapper>
  )
}

export default EditProfile

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: wp(4),
  },
  avatarContainer: {
    height: hp(14),
    width: hp(14),
    alignSelf: 'center',
  },
  avatar: {
    width: '100',
    height: '100%',
    borderRadius: theme.radius.xxl * 1.8,
    borderCurve: 'continuous',
    borderWidth: 1,
    borderColor: theme.colors.darkLight,
  },
  cameraIcon: {
    position: 'absolute',
    bottom: 0,
    right: -10,
    padding: 8,
    borderRadius: 50,
    backgroundColor: 'white',
    shadowColor: theme.colors.textLight,
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.4,
    shadowRadius: 5,
    elevation: 7,
  },
  form: {
    gap: 18,
    marginTop: 20,
  },
  input: {
    flexDirection: 'row',
    borderWidth: 0.4,
    borderColor: theme.colors.text,
    borderRadius: theme.radius.xxl,
    borderCurve: 'continuous',
    padding: 17,
    paddingHorizontal: 20,
    gap: 15,
  },
  bio: {
    flexDirection: 'row',
    height: hp(15),
    alignItems: 'flex-start',
    paddingVertical: 15,
  },
})
